<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>历史消息统计</title>
    <script type="text/javascript" src="${rc.contextPath}/javascripts/echarts.js"></script>
    <script type="text/javascript" src="${rc.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            option = {
                title: {
                    text: '各推送类别下消息回执的统计',
                    subtext: '最近十五天'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['省份推送', '个性化推送', '订单催支付', '订单行为推送', '详情行为推送', '优惠券推送', '门票出行推送', '点评推送', '新到城市推送', '关联推荐', '行程助手']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        date: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '省份推送',
                        type: 'bar',
                        data: []
                    },
                    {
                        name: '订单催支付',
                        type: 'bar',
                        data: []
                    },
                    {
                        name: '订单行为推送',
                        type: 'bar',
                        data: []
                    },
                    {
                        name: '详情行为推送',
                        type: 'bar',
                        data: []
                    },
                    {
                        name: '优惠券推送',
                        type: 'bar',
                        data: []
                    },
                    {
                        name: '门票出行推送',
                        type: 'bar',
                        data: []
                    },
                    {
                        name: '点评推送',
                        type: 'bar',
                        data: []
                    },
                    {
                        name: '新到城市推送',
                        type: 'bar',
                        data: []
                    },
                    {
                        name: '关联推荐',
                        type: 'bar',
                        data: []
                    },
                    {
                        name: '个性化推送',
                        type: 'bar',
                        data: []
                    },
                    {
                        name: '行程助手',
                        type: 'bar',
                        data: []
                    }
                ]
            };
            $.ajax({
                url: "${rc.contextPath}/message/ajaxData",
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        xAxisData = data.xAxisData;
                        normalData = data.normalData;
                        payOrderData = data.payOrderData;
                        accurateOrderData = data.accurateOrderData;
                        accurateDetailData = data.accurateDetailData;
                        couponData = data.couponData;
                        ticketTravelData = data.ticketTravelData;
                        ticketCommentData = data.ticketCommentData;
                        changedData = data.changedData;
                        associtaionData = data.associtaionData;
                        personaliseData = data.personaliseData;
                        travelAsstData = data.travelAsstData;

                        var myChart = echarts.init(document.getElementById('main'));
                        option.xAxis[0].data = xAxisData;
                        option.series[0].data = normalData;
                        option.series[1].data = payOrderData;
                        option.series[2].data = accurateOrderData;
                        option.series[3].data = accurateDetailData;
                        option.series[4].data = couponData;
                        option.series[5].data = ticketTravelData;
                        option.series[6].data = ticketCommentData;
                        option.series[7].data = changedData;
                        option.series[8].data = associtaionData;
                        option.series[9].data = personaliseData;
                        option.series[10].data = travelAsstData;
                        myChart.setOption(option);
                    }
                }
            });
        })

    </script>
</head>
<body>
<br>
<br>
<div id="main" style="width:1700px;height:700px;margin:0 auto;"></div>
</body>
</html>